<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证功能</title>
    <style type="text/css">

        form {
            width: 40%;
            margin: 0px auto;
        }

        form p span {
            /*background-color: #cc9eff;*/
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        form p select {
            width: 100px !important;

        }

        #footer {
            text-align: center;
        }

        .form-item {
            width: 210px;
            height: 25px;
            background-color: antiquewhite;
            padding-left: 5px;
        }

        .form-item:hover {
            background-color: wheat;
        }

        .btn {
            width: 80px;
            height: 25px;
            /*line-height: 21px;*/
            background-color: #cc9eff;
            text-align: center;
        }

        .describe {
            width: 400px;
            height: 150px;

        }
    </style>
</head>
<body>
<form action="#" name="myForm" method="post" onsubmit="return valuedate()">
    <p>
        <span>用户名: </span>
        <input type="text" name="username" class="form-item">
    </p>
    <p>
        <span>密码: </span>
        <input type="password" name="password" class="form-item">
    </p>
    <p>
        <span>确认密码: </span>
        <input type="password" name="check_password" class="form-item">
    </p>
    <p>
        <span>手机号码: </span>
        <input type="text" name="phone" class="form-item">
    </p>
    <p>
        <span>邮箱: </span>
        <input type="email" name="email" class="form-item">
    </p>
    <p>
        <span>性别: </span>
        <input type="radio" name="gender" value="1" checked>男
        <input type="radio" name="gender" value="0">女
    </p>
    <p>
        Hobbies:
        <!--        注意，默认普通button会是提交的意思-->
        <button class="btn" type="button">全选</button>
        <button class="btn" type="button">不选</button>
        <button class="btn" type="button">反选</button>
        <br>
        <input type="checkbox" name="hobbies" value="read">阅读
        <input type="checkbox" name="hobbies" value="music">音乐
        <input type="checkbox" name="hobbies" value="movie">电影
        <input type="checkbox" name="hobbies" value="game">游戏
        <input type="checkbox" name="hobbies" value="service">service
        <input type="checkbox" name="hobbies" value="ero">ero
    </p>
    <p>
        <span>Address: </span>
        <select name="address" id="province" class="form-item">
            <option value="-1">-请选择-</option>
            <option value="1">-江西省-</option>
            <option value="2">-江苏省-</option>
            <option value="3">-上海市-</option>
            <option value="4">-广东省-</option>
        </select>
        <select name="city" id="city" class="form-item">
            <option value="-1">-请选择-</option>
            <!--            此处的元素是动态获取-->
        </select>
    </p>
    <p>
        <span>描述: </span>
        <input type="text" name="describe" class="describe">
    </p>
    <p id="footer">
        <!--提交到form中action的值的位置-->
        <input type="submit" value="提交">
        <input type="submit" value="重置">
    </p>
</form>
<script type="text/javascript" src="../js/Day_3/day_1.js"></script>
</body>
</html>